<template>
  <ConfigProvider :theme="appTheme" :locale="getAntdLocale">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
import { theme } from 'ant-design-vue';
import { ConfigProvider } from 'ant-design-vue';
import { AppProvider } from '/@/components/Application';
import { useLocale } from '/@/config/i18n/useLocale';
import { setTitle } from '/@/config/globalConfig';
import { useAppStore } from '/@/store/modules/app';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { ThemeEnum } from '/@/common/enums/styleEnum';
import { changeTheme } from '/@/config/logics/theme/index';
import 'dayjs/locale/zh-cn';

const appStore = useAppStore();
// 解决日期时间国际化问题
// support Multi-language
const { getAntdLocale } = useLocale();

setTitle();
/**
 * 2024-04-07
 * liaozhiyang
 * 暗黑模式下默认文字白色，白天模式默认文字 #333
 * */
const modeAction = (data) => {
  if (data.token) {
    if (getDarkMode.value === ThemeEnum.DARK) {
      Object.assign(data.token, { colorTextBase: 'fff' });
    } else {
      Object.assign(data.token, { colorTextBase: '#333' });
    }
    // 定义主题色 css 变量
    if (data.token.colorPrimary) {
      document.documentElement.style.setProperty('--j-global-primary-color', data.token.colorPrimary);
    }
  }
};
const appTheme: any = ref({});
const { getDarkMode } = useRootSetting();
watch(
  () => getDarkMode.value,
  (newValue) => {
    delete appTheme.value.algorithm;
    if (newValue === ThemeEnum.DARK) {
      appTheme.value.algorithm = theme.darkAlgorithm;
    }
    // 生产环境暗黑模式下主题色不生效
    if (import.meta.env.PROD) {
      changeTheme(appStore.getProjectConfig.themeColor);
    }
    modeAction(appTheme.value);
    appTheme.value = {
      ...appTheme.value,
    };
  },
  { immediate: true }
);
watch(
  appStore.getProjectConfig,
  (newValue) => {
    const primary = newValue.themeColor;
    const result = {
      ...appTheme.value,
      ...{
        token: {
          colorPrimary: primary,
          wireframe: true,
          fontSize: 14,
          colorTextBase: '#333',
          colorSuccess: '#55D187',
          colorInfo: primary,
          borderRadius: 4,
          sizeStep: 4,
          sizeUnit: 4,
          colorWarning: '#EFBD47',
          colorError: '#ED6F6F',
          fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
        },
      },
    };
    appTheme.value = result;
    modeAction(result);
  },
  { immediate: true }
);
setTimeout(() => {
  // appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
}, 300);

</script>
<style lang="less">
// windi会影响到html2canvas绘制的图片样式
img {
  display: inline-block;
}
</style>
